<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta http-equiv ="Content-Security-Policy" content="upgrade-insecure-requests"> -->
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <link rel="icon" href="<%= BASE_URL %>favicon.png">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_793623_lhlp71zylj.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/defis-net/material/font/font.css">
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/defis-net/material/element-ui/theme-chalk/index.css"> -->
    <title>DeFis-Network</title>
    <style>
    @media screen and (min-width: 751px) {
      html{
        font-size: 50px !important;
      }
    }
    .loading{
      top: 0;
      left: 0;
      width: 100%;
      position: fixed;
      height: 100%;
      background: #07D79B;
      display: flex;
      align-items: center;
      color: #FFF;
      justify-content: center;
    }
    .logo{
      position: relative;
      height: 31px;
      width: 21px;
    }
    /* .logo::before{
      content: '';
      position: absolute;
      width: 60px;
      height: 60px;
      left: 50%;
      top: 50%;
      background:linear-gradient(145deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    } */
    .turn{
      position: absolute;
      display: inline-block;
      width: 70px;
      height: 70px;
      animation:turn 2s linear infinite;      
      margin: auto;
      left: 50%;
      top: 50%;
      background: #FFF;
      /* background: #000; */
      border-radius: 50%;
      transform: translate(-50%, -50%);
      z-index: 7;
    }
    .turn::before{
      content: '';
      position: absolute;
      width: 70px;
      height: 69px;
      background: #07D79B;
      border-radius: 50%;
      right: -1px;
    }
    .disc{
      width: 10px;
      height: 10px;
      display: block;
      position: relative;
      border-radius: 50%;
      left: 50%;
      top: 0;
      transform: translate(-50%, -50%);
      background: #FFF;
      z-index: 11;
    }
    /* 
      turn : 定义的动画名称
      1s : 动画时间
      linear : 动画以何种运行轨迹完成一个周期
      infinite :规定动画应该无限次播放
     */
    @keyframes turn{
      0%{-webkit-transform: translate(-50%, -50%) rotate(0deg);}
      25%{-webkit-transform: translate(-50%, -50%) rotate(90deg);}
      50%{-webkit-transform: translate(-50%, -50%) rotate(180deg);}
      75%{-webkit-transform: translate(-50%, -50%) rotate(270deg);}
      100%{-webkit-transform: translate(-50%, -50%) rotate(360deg);}
    }
    /* .logo::after{
      content: '';
      position: absolute;
      width: 59px;
      height: 59px;
      left: 50%;
      top: 50%;
      background: #07D79B;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    } */
    .one{
      position: absolute;
      width:10px;
      height:31px;
      background: #FFF;
      transform: rotate(30deg);
      border-radius: 7px;
      z-index: 10;
    }
    .two{
      position: absolute;
      width:31px;
      height:10px;
      background:#CDF7EB;
      border-radius: 7px;
      bottom: 0px;
      left: -5px;
      z-index: 9;
    }
    .three{
      position: absolute;
      width:10px;
      height:31px;
      background: #99EED6;
      transform: rotate(-30deg);
      border-radius: 7px;
      right: 0;
      z-index: 8;
    }
    </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <div class="loading">
        <span class="logo">
          <span class="turn">
            <span class="disc"></span>
          </span>
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </span>
      </div>
    </div>
    <!-- <div class="loading">
      <span class="logo">
        <span class="turn">
          <span class="disc"></span>
        </span>
        <span class="one"></span>
        <span class="two"></span>
        <span class="three"></span>
      </span>
    </div> -->
    <!-- built files will be auto injected -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/defis-net/material/chart_library/charting_library.min.js"></script>
    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/defis-net/material/coin/coinJson.js"></script> -->
  </body>
</html>
